<template>
  <var-icon
    class="back"
    @click="router.back()"
    name="chevron-left"
    color="#fff"
    :size="36"
  />
  <div v-if="scenic">
    <var-swipe :autoplay="3000">
      <var-swipe-item v-for="item in scenic.scenic_img" :key="item">
        <var-image width="100%" height="240px" fit="cover" :src="item" />
      </var-swipe-item>
    </var-swipe>

    <div class="content">
      <div class="title">
        <var-ellipsis :tooltip="false" class="name">{{
          scenic.spot
        }}</var-ellipsis>

        <div class="right">
          <var-icon
            v-show="!isStar"
            color="var(--color-primary)"
            name="star-outline"
            @click="toStar(true)"
          />
          <var-icon
            v-show="isStar"
            color="var(--color-primary)"
            name="star"
            @click="toStar(false)"
          />

          <var-chip type="primary" @click="toThreeD">云游览</var-chip>
        </div>
      </div>
      <div class="intro">
        <div class="item">
          景点位置:<span>{{ scenic.addr }}</span>
        </div>
        <div class="item">
          开放时间:<span>{{ scenic.open_time || '-' }}</span>
        </div>
        <div class="item">
          建议参观时间:<span>{{ scenic.visit_time || '-' }}</span>
        </div>
        <div class="item">
          景区官网:<span>{{ scenic.url || '-' }}</span>
        </div>
        <div class="item">
          景区电话:<span>{{ scenic.tel || '-' }}</span>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="name">景点详情</div>
      <div class="detail">{{ scenic.detail }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getScenicDetail, collectScenic } from '@/api'
import { debounce } from '@/utils'

const router = useRouter()
const route = useRoute()
const id = route.params.id
const scenic = ref(null)

onMounted(async () => {
  scenic.value = await getScenicDetail(id)
  // 判断是否收藏
  isStar.value = scenic.value.isCollect
})

const toThreeD = () => {
  window.open('http://localhost:3000')
}

const isStar = ref(false)

const toStar = debounce(async val => {
  await collectScenic(id)
  isStar.value = val
})
</script>
<style scoped lang="scss">
.back {
  position: absolute;
  z-index: 1;
}

.content {
  margin: 20px 0;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .name {
    max-width: 220px;
    font-size: 18px;
    font-weight: bold;
  }

  .right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .intro {
    .item {
      margin: 10px 0;
      font-weight: 700;
      font-size: 14px;

      span {
        color: #666;
        font-weight: normal;
        margin-left: 8px;
      }
    }
  }

  .detail {
    margin-top: 10px;
    color: #666;
    line-height: 1.5;
  }
}
</style>
